<template>
  <div class="meet-room-manage">
    <div class="table-box">
      <vxe-table
        align="center"
        size="medium"
        highlight-hover-row
        resizable
        border
        stripe
        :data="roomList"
        height="100%"
        class="table-con">
        <vxe-column field="roomName" title="会议室名称" min-width="200" fixed="left">
          <template #default="{ row }">
            <div v-if="row.roomId">{{ row.roomName }}</div>
            <div v-else>
              <el-input v-model="row.roomName" placeholder="请输入" maxlength="20"></el-input>
            </div>
          </template>
        </vxe-column>
        <vxe-column title="创建人" width="200">
          <template #default>
            <div>{{ userInfo.userName }}</div>
          </template>
        </vxe-column>
        <vxe-column title="操作" width="250">
          <template #default="{ row, rowIndex }">
            <el-button type="text" style="color: #2b78f1" @click.stop="del(row, rowIndex)" v-if="row.roomId">
              删除
            </el-button>
            <template v-else>
              <el-button type="text" style="color: #2b78f1" @click.stop="save(row, rowIndex)">保存</el-button>
              <el-button type="text" style="color: #2b78f1" @click.stop="cancle(rowIndex)">取消</el-button>
            </template>
          </template>
        </vxe-column>
      </vxe-table>
    </div>
    <div class="add-btn" @click="addNew">
      <i class="el-icon-plus"></i>
      <span>添加</span>
    </div>
    <div class="close-btn">
      <el-button type="primary" size="small" @click="$emit('close')">关闭</el-button>
    </div>
  </div>
</template>

<script>
import { getMeetingRoomList, addMeetingRoom, delMeetingRoom } from '@apis/meeting.js'
export default {
  name: 'MeetRoomManage',
  components: {},
  props: {},
  data() {
    return {
      roomList: [],
      userInfo: JSON.parse(localStorage.PSKH_USERINFO),
    }
  },
  watch: {},
  computed: {},
  created() {
    this.getMeetingRoomList()
  },
  mounted() {},
  methods: {
    del(row, index) {
      this.$confirm('确定删除该会议室吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info',
      }).then(() => {
        delMeetingRoom({
          id: row.roomId,
        }).then(res => {
          if (res.code === 0) {
            this.roomList.splice(index, 1)
          }
        })
      })
    },
    save(row, index) {
      if (!row.roomName) {
        this.$message.warning('请填写会议室名称')
      }
      addMeetingRoom({
        createByName: this.userInfo.userName,
        roomName: row.roomName,
      }).then(res => {
        if (res.code === 0) {
          if (res.data.code === 'success') {
            row.roomId = res.data.message
            this.roomList[index.roomId] = res.data.message
          } else {
            this.$message.warning(res.data.message)
          }
        }
      })
    },
    cancle(index) {
      this.roomList.splice(index, 1)
    },
    addNew() {
      this.roomList.push({
        roomName: '',
        roomId: '',
      })
    },
    getMeetingRoomList() {
      getMeetingRoomList({
        date: '',
        meetingId: '',
      }).then(res => {
        if (res.code === 0) {
          this.roomList = res.data
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.meet-room-manage {
  height: 50vh;
  display: flex;
  flex-direction: column;
}
.table-box {
  flex: 1;
  height: calc(100% - 50px);
  overflow: hidden;
}
.add-btn {
  text-align: center;
  color: #d9001b;
  padding: 10px 0;
  border: 1px solid #eeeeee;
  border-top: 0;
  cursor: pointer;
  font-size: 16px;
}
.close-btn {
  text-align: center;
  margin-top: 10px;
}
</style>
